<template>
	<div>
		<div class="el_header">
			<img src="./img_gold/icon_main.png" />
			<a> 首页 </a> >
			<a> 个人中心 </a> >
			<a> 我的作品 </a>
			
			<a class="a_return"> < 返回 </a>
		</div>
		
				
					<!-- 主体内容 -->
					<div class="el_main">
						<el-row>
							<el-col :span="23">
	
								<div class="div_main_top">
									<div class="div_btn_active"> 全部 </div>
									<div class="div_btn_link"> Search </div>
									<div class="div_btn_link"> Python </div>
									<div class="div_btn_link"> NOIP </div>
								
									<div class="div_input">
										<span> 作品名称 </span>
										<input placeholder="请输入作品名称" />
										<select>
											<option>最热</option>
										</select>
									</div>
								</div>
							</el-col>
						</el-row>
						
						
						<el-row>
							<el-col :span="23">
								<div class="div_main_bottom">
									<div class="div_card" v-for="item in 10">
										<div class="div_hidden"></div>
										
										<div class="div_card_img"></div>
										
										<table>
											<tr>
												<td class="td_worksName"> 作品名称 </td>
											</tr>
											<tr class="tr_dz">
												<td> <img src="./img_gold/点赞.png" /> 20</td>
												<td> <img src="./img_gold/search.png"  class="img_search"/> </td>
											</tr>
											<tr class="tr_tx">
												<td> <img src="./img_gold/用户头像.png" /> 用户名 </td>
												<td>5天前 </td>
											</tr>
										</table>
									</div>
									
									
									
								</div>
							</el-col>
						</el-row>
						
						<el-pagination
							background
							prev-text="上一页"
							next-text="下一页"
							layout="prev, pager, next"
							:total="500"
							class="the_page">
						</el-pagination>
					</div>
			
		
	</div>
</template>

<script>
</script>

<style scoped="scoped">
	span,label,a{
		line-height: 0;
	}
		
		/* 顶部导航下面像 面包屑一样的东西 */
	.el_header{
		font-size: 0.0875rem;
		line-height: 0.1875rem;
		padding-left: 0.4rem;
		margin-bottom: 0.0625rem;
		width: 94%;
		position: absolute;
		left: 0;
		top: 0.5625rem;
	}
	.el_header>img{
		vertical-align: middle;
	}
	
	.el_header a{
		font-size: 0.0875rem;
	}
	.el_header .a_return{
		color: #0070C9;
		float: right;
		margin-top: 0.09375rem;
	}
		
	
	/* 主体部分 */
	.el_main{
		overflow: hidden;
		margin-top: 0.28125rem;
		position: relative;
		margin-left: 0.125rem;
	}
	/* 主体内容的上部分 */
	.div_main_top{
		background: url(img_gold/myshare_top.png);
		background-size: 100% 100%;
		height: 0.5rem;
		width: 7.1875rem;
		padding-top: 0.25rem;
		padding-right: 0.125rem;
	}
	.div_btn_active{
		background: url(./img_gold/按钮（激活）.png);
		background-size: 100% 100%;
		width: 0.75rem;
		height: 0.25rem;
		float: left;
		margin-left: 0.1875rem;
		color: white;
		font-size: 0.09375rem;
		line-height: 0.1875rem;
		text-align: center;
	}
	.div_btn_link{
		background: url(./img_gold/按钮（默认）.png);
		background-size: 100% 100%;
		width: 0.75rem;
		height: 0.25rem;
		float: left;
		margin-left: 0.125rem;
		font-size: 0.09375rem;
		line-height: 0.1875rem;
		text-align: center;
	}
	
	.div_input{
		float: right;
		font-size: 0.0875rem;
	}
	.div_input input{
		padding-left: 0.09375rem;
		height: 0.21875rem;
		width: 1.25rem;
		border-radius: 0.03125rem;
		border: 0.00625rem solid #999;
		margin-left: 0.0625rem;
		margin-right: 0.0625rem;
	}
	.div_input select{
		height: 0.21875rem;
		width: 0.5rem;
		border-radius: 0.01875rem;
		border: 0.00625rem solid #999;
		background: white;
	}
	
	
	/* 主体内容的下半部分 */
	.div_main_bottom{
		margin-top: 0.0625rem;
		padding: 0.175rem 0.1875rem 0 0.1875rem;
		background: url(./img_gold/main-bottom.png);
		background-size: 100% 100%;
		height: 3.375rem;
		width: 6.9375rem;
	}
	
	.div_card{
		width: 1.125rem;
		height: 1.4375rem;
		background: url(./img_gold/card_bj.png);
		background-size: 100% 100%;
		float: left;
		margin: 0 0.06875rem 0.0625rem 0.0625rem;
		padding: 0.0625rem;
		font-size: 0.08125rem;
		color: white;
		position: relative;
	}
	
	
	.div_card_img{
		background: url(./img_gold/card_img.png) no-repeat,url(./img_gold/card_kuang.png);
		background-size: 90% 90%,100% 100%;
		background-position: 0.05rem 0.03125rem,0;
		height: 0.6875rem;
		width: 1rem;
		margin: auto;
		margin-bottom: 0.0625rem;
	}
	
	.div_hidden{
		position: absolute;
		top: 0;
		left: 0;
		width: 1.25rem;
		height: 1.55625rem;
		display: none;
		background: url(./img_gold/hidden.png);
		background-size: 100% 100%;
	}
	.div_card:hover .div_hidden{
		display: block;
	}
	
	/* 作品名称 */
	.td_worksName{
		font-size: 0.0875rem;
		font-weight: 600;
		color: white;
		width: 0.6875rem;
	}
	
	.img_search{
		width: 0.375rem;
	}
	
	/* 头像那一行 */
	.tr_tx img{
		vertical-align: middle;
		width: 0.1875rem;
	}
	
	
	.the_page{
		margin-top: 0.0625rem;
		margin-left: 30%;
		margin-bottom: 0;
		height: 0.1875rem;
	}
</style>
